<template>
  <div class="container">
    <div class="header">
      <button class="back-button" @click="goBack">
        返回
      </button>
      <div class="title">
        家属关联
      </div>
      <button class="confirm-button" @click="confirm">
        确定
      </button>
    </div>
    <div class="content">
      <div class="member-list">
        <div v-for="(member, index) in members" :key="index" class="member-item">
          <div class="member-info">
            {{ member.name }}
          </div>
        </div>
      </div>
      <button class="add-member-button" @click="showAddForm = !showAddForm">
        添加成员
      </button>
      <div v-if="showAddForm" class="add-form">
        <div class="form-group">
          <label>选择联系人关系</label>
          <!-- <select v-model="relation" class="relation-select">
            <option value="">
              请选择关系
            </option>
            <option v-for="option in relationOptions" :key="option.value" :value="option.value">
              {{ option.label }}
            </option>
          </select> -->
        </div>
        <div class="form-group">
          <label>请输入手机号：</label>
          <!-- <input
            v-model="phone"
            type="tel"
            placeholder="请输入手机号"
            class="phone-input"
          > -->
        </div>
        <div class="form-group agree-group">
          <label class="checkbox-label">

            <radio @click="agree = '老伴'">同意对方可查看我的数据</radio>

          </label>
        </div>
        <button class="send-request-button" @click="sendRequest">
          发送添加请求
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

// 家庭成员列表
const members = ref([
  { name: '女儿' },
]);

// 添加表单状态
const showAddForm = ref(false);
const relation = ref('');
const phone = ref('');
const agree = ref(false);

// 关系选项
const relationOptions = [
  { value: '儿女', label: '儿女' },
  { value: '老伴', label: '老伴' },
  { value: '孙子/女', label: '孙子/女' },
  { value: '照顾者', label: '照顾者' },
];

// 返回上一页
const goBack = () => {
  uni.navigateBack();
};

// 确认操作
const confirm = () => {
  if (members.value.length > 0) {
    console.log('确定按钮点击');
    // 这里可以添加跳转逻辑或保存数据的逻辑
  }
};

// 发送添加请求
const sendRequest = () => {
  if (!relation.value) {
    uni.showToast({
      title: '请选择联系人关系',
      icon: 'none',
    });
    return;
  }
  if (!phone.value) {
    uni.showToast({
      title: '请输入手机号',
      icon: 'none',
    });
    return;
  }
  if (!agree.value) {
    uni.showToast({
      title: '请同意对方查看您的数据',
      icon: 'none',
    });
    return;
  }
  uni.showToast({
    title: '添加请求已发送',
    icon: 'success',
  });
  members.value.push({ name: relation.value });
  relation.value = '';
  phone.value = '';
  agree.value = false;
  showAddForm.value = false;
};
</script>

<style scoped>
.container {
  font-family: 'Arial', sans-serif;
  background-color: #fff;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #a3c4ff;
  padding: 15px;
  color: #fff;
}

.back-button, .confirm-button {
  background-color: transparent;
  border: none;
  color: #fff;
  cursor: pointer;
  line-height: 36px;
}

.back-button {
  width: 80px;
  height: 36px;
  background-color: #fff !important;
  color: #000 !important;
  border: 1px solid #ccc !important;
}

.confirm-button {
  width: 80px;
  height: 36px;
  background-color: #4a90e2 !important;
}

.title {
  font-size: 18px;
  font-weight: bold;
}

.content {
  flex: 1;
  padding: 20px;
}

.member-list {
  margin-bottom: 20px;
}

.member-item {
  background-color: #a3c4ff;
  color: #fff;
  padding: 15px;
  margin-bottom: 10px;
  border-radius: 5px;
  text-align: center;
  height: 40px;
  line-height: 40px;
}

.add-member-button {
  background-color: transparent;
  border: 1px solid #ccc;
  padding: 12px;
  width: 100%;
  margin-bottom: 20px;
  cursor: pointer;
  font-size: 16px;
}

.add-form {
  background-color: #f0f0f0;
  padding: 20px;
  border-radius: 5px;
}

.form-group {
  margin-bottom: 15px;
}

label {
  display: block;
  margin-bottom: 5px;
  color: #4a90e2;
  font-size: 16px;
}

.relation-select {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: white;
}

.phone-input {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.send-request-button {
  background-color: #a3c4ff;
  color: #fff;
  border: none;
  padding: 12px;
  width: 100%;
  border-radius: 5px;
  cursor: pointer;
  margin-top: 10px;
  font-size: 16px;
}

.checkbox-label {
  display: flex;
  align-items: center;
}

.checkbox-input {
  margin-right: 8px;
}

.agree-group {
  display: flex;
  align-items: center;
}
</style>
